window.addEventListener("load", () => {
    /*
      ① 点击登录按钮， 模态框和遮挡层就会显示出来 display:block;
      ② 点击关闭按钮，模态框和遮挡层就会隐藏起来 display:none;
      ③ 在页面中拖拽的原理： 鼠标按下并且移动， 之后松开鼠标
      ④ 触发事件是鼠标按下 mousedown， 鼠标移动 mousemove 鼠标松开 mouseup
      ⑤ 拖拽过程:  鼠标移动过程中，获得最新的值赋值给模态框的 left和 top 值， 这样模态框可以跟着鼠标走了
      ⑥ 鼠标按下触发的事件源是 最上面一行，就是  id 为 title
      ⑦ 鼠标的坐标 减去 鼠标在盒子内的坐标， 才是模态框真正的位置。
      ⑧ 鼠标按下，我们要得到鼠标在盒子的坐标。
      ⑨ 鼠标移动，就让模态框的坐标设置为  ： 鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面。
      ⑩ 鼠标松开，就停止拖拽，就是可以让鼠标移动事件解除
    */

    // 获取打开按钮
    const open = document.querySelector(".open");
    // 获取关闭按钮
    const close = document.querySelector(".close");
    // 获取整个大的模态框
    const fillScreen = document.querySelector(".model-box");

    // 获取模态框可移动的头部区域
    const header = document.querySelector(".title");

    // 获取模态框珠主区域
    const modelBox = document.querySelector(".content");

    open.addEventListener("click", () => {
        fillScreen.style.display = "block"
    })
    close.addEventListener("click", () => {
        fillScreen.style.display = "none"
    })
    header.addEventListener("mousedown", (event) => {
        const x = event.pageX - modelBox.offsetLeft;
        const y = event.pageY - modelBox.offsetTop;
        console.log(x, y)

        document.addEventListener("mousemove", move);

        function move(event) {
            modelBox.style.left = event.pageX - x + 'px';
            modelBox.style.top = event.pageY - y + 'px';
        }

        document.addEventListener("mouseup", () => {
            document.removeEventListener("mousemove", move)
        })
    })
})
